// 所有react项目都要有
import react, { Component, Fragment } from 'react';
// 虚拟DOM、JSX解析器
import reactDom from 'react-dom';

// 引入样式表
import './index.css';

// 组件的运用：组合、嵌套。
class App extends Component {
  // 每个class组件都要有的，必备的。
  render() {
    return (
      <>
        <Fruits fruits={['苹果', '香蕉', '梨', '桃']} />
        <Like fruit='苹果' isLike={true} />
        <Like fruit='梨' isLike={false} />
      </>
    );
  }
}

// 这是一个条件渲染的例子
class Like extends Component {
  // 每个class组件都要有的，必备的。
  render() {
    const isLike = this.props.isLike === true ? '喜欢' : '不喜欢 ';
    return (
      <p>
        水果 {this.props.fruit} {isLike}
      </p>
    );
  }
}

// 列表渲染
class Fruits extends Component {
  render() {
    // 使用map
    // const li = this.props.fruits.map((item, i) => {
    //   return <li key={i}>{item}</li>;
    // });

    // 使用for循环的例子
    // 要把循环的元素放到数组当中。
    // 注意：JSX它不是字符串，每一个元素会被转化为对象。
    let p = [];
    for (var i = 0; i < this.props.fruits.length; i++) {
      // 第一个大括号，引用表达式，引用变量。
      // 第二个大括号，是对象本身，是一个样式对象。
      // font-size 这是CSS的样式，在JSX当中要转化为驼峰命名。
      // 内联样式
      p.push(
        /* <p style={{ color: 'red', fontSize: 24, fontWeight: 700 }} key={i}> */
        /* 1、用import引入样式表
         * 2、使用className来指定样式，不要用class，因为它被JS当作关键字用了。
         */
        <p className='fruits' key={i}>
          {this.props.fruits[i]}
        </p>
      );
    }

    return p;
  }
}

reactDom.render(<App />, document.getElementById('root'));
